<script>
export default {
  name: 'Right',
}
</script>

<template>
  <Card style="height: 546px">
    <p class="title">程序员需求人数</p>
    <div class="header row">
      <span class="col col-1">时间</span>
      <span class="col col-2">地址</span>
      <span class="col col-1">需求人数</span>
    </div>
    <div class="content" ref="contentRef" @mouseenter="isHover = true" @mouseleave="isHover = false">

      <div class="content-wrap" :style="{transform: `translateY(${translateY}px)`}" ref="wrapRef">
        <div :style="{height: start*30+'px'}"></div>
        <div class="row" v-for="item in showList" :key="item.id">
          <div class="col col-1">{{ item.date }}</div>
          <div class="col col-2">{{ item.address }}</div>
          <div class="col col-1">{{ item.num }}</div>
        </div>
      </div>
    </div>
  </Card>
</template>

<script setup>
import { ref, onMounted, nextTick, computed } from "vue";
import Card from '@/components/Card/index.vue'
import MySocket from "@/utils/web-socket";

const list = ref([])

// onMounted(() => {
//   // 连接ws服务器
//   const socket = new WebSocket('ws://localhost:8899')
//   // 绑定接收消息的监听
//   socket.onmessage = (event) => {
//     const {data} = event
//     console.log(data)
//     list.value = list.value.concat(JSON.parse(data))

//     // 当长度超过20个开始滚动
//     if (list.value.length>20) {
//       // nextTick(() => {
//         startScroll() // 让内部可以得到列表的最新高度
//       // })
//     }
//   }
// })

onMounted(() => {
  new MySocket((e) => {
    if (e.data === "pong") return;
    const data = JSON.parse(e.data);
    list.value = list.value.concat(data);
    if (list.value.length >= 20) {
      startScroll();
    }
  });
});

const translateY = ref(0)
const contentRef = ref()
const wrapRef = ref()
let intervalId
const isHover = ref(false)

const start = ref(0)
const end = ref(25)
const showList = computed(() => list.value.slice(start.value, end.value))


// 滚动列表
const startScroll = () => {

  // 清除前面还在运行的定时器
  if (intervalId) {
    clearInterval(intervalId)
  }

  const contentSize = Math.ceil(contentRef.value.clientHeight / 30 )

  // 启动循环定时器, 不断减少translateY
  // 每秒变化60次, 每次变化1px
  
  intervalId = setInterval(() => {
    // 如果是悬停状态, 不移到
    if (isHover.value) return

    let y = translateY.value - 1
    translateY.value = y

    // 一旦滚动的位移是30的位数, 更新start/end
    if (y%30===0) {
      start.value++
      end.value++
      // 总个数: list.value.length
      // 容器可见的个数: Math.ceil(contentRef.value.clientHeight / 30 )
      // 已滚动过去的个数: start
      // 滚动底部: start.value + Math.ceil(contentRef.value.clientHeight / 30 ) >= list.value.length
      if (start.value + contentSize >= list.value.length) {
        clearInterval(intervalId)
        intervalId = null
      }
    }

    
  }, 1000/60);
}
</script>

<style scoped lang="scss">
.title {
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  margin: 10px 0;
}

.header {
  margin: 0 10px;
  background-color: rgba(255, 255, 255, 0.1);
  .col {
    color: #68d8fe;
  }
}

.content {
  margin: 0 10px;
  height: calc(100% - 68px);
  overflow: hidden;
}
.row {
  display: flex;
  height: 30px;
  line-height: 30px;
  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    color: #68d8fe;
  }
  .col {
    color: #fff;
    text-align: center;
    font-size: 10px;
    color: #61a8ff;
  }
  .col-1 {
    flex: 1;
  }
  .col-2 {
    flex: 2;
  }
}

</style>